<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引包 -->
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 容器|模板 -->
    <div id="app">

    </div>
</body>

</html>
<script>

    //全局组件的使用:只需要定义一次，可以在任意组件中直接使用。就不用每一次都在注册了。




  //定义一个组件
  const Carousel = Vue.extend({
            data(){
                return {info:'我是轮播图组件,而且我还是全局组件'};
            },
            //结构编辑器
            template:`
               <h1>{{info}}</h1>
            `
       });

   //定义为全局组件 :定义一次,可以在任意地方直接使用，不需要注册。
       //第一个参数：全局组件的名字(字符串)  第二个参数:组件(不能书写为字符串)

       //全局组件一般在这种情况下才会使用:项目当中很多地方(组件)，大家频繁使用某一个功能，
       //你就可以把这个功能封装为全局组件，定义一次，可以在任意地方直接使用【不需要引入、不需要注册】直接使用。
       Vue.component("Erha",Carousel);


 //目前学习的组件三步:1：定义、2注册  3使用

         const Component1 = Vue.extend({
             template:`
               <div class="box1">
                   <p>我是Component1组件</p> 
                   <Erha></Erha>
               </div>
             `
       });

       const Component2 = Vue.extend({
             template:`
               <div class="box2">
                   <p>我是Component2组件</p> 
                   <Erha></Erha>
               </div>
             `
       });



    const App = Vue.extend({
        data() {
            return { msg: '我是根组件App' }
        },
        template: `
                <div class="box">
                    <h1>{{msg}}</h1>
                    <Component1></Component1>
                    <Component2></Component2>
                    <Erha></Erha>
                </div>
    `,
    components:{
        Component1,
        Component2
    }
    })


    //关联VM
    const VM = new Vue({
        el: '#app',
        components:{
            App
        },
        template:`<App></App>`

    })
</script>